// eslint-disable-next-line import/no-extraneous-dependencies
/*
 * @Author: your name
 * @Date: 2022-07-14 15:04:29
 * @LastEditTime: 2022-07-14 22:11:34
 * @LastEditors: NB-SZ-658
 * @Description: In User Settings Edit
 * @FilePath: \antd-demo-ts\src\pages\updata.tsx
 */
import { useEffect, useState } from 'react';
import './index.less'
import { Button, Card, Avatar, Typography, Modal, Input, notification } from 'antd';
import { deleteData, addData, editData, searchData } from '../store/actions'
import { useSelector, useDispatch } from "react-redux"

const { Search } = Input;
const { Meta } = Card;
const { Paragraph } = Typography;
const UpdataPage = () => {
    const [modleType, setModleType] = useState(false)
    const [inputValue, setInputValue] = useState('')
    const [editItem, setEditItem] = useState({})
    const [modalTitle, setModalTitle] = useState('修改信息')

    let ListData = useSelector((state: any) => state.updataList)
    const makeidNumber = (length: number) => {
        var result = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        } return result;
    };
    const dispath = useDispatch()
    const deleteList = (id: string) => {
        dispath(deleteData(id))
    }
    const handleOk = () => {
        if (!inputValue) {
            notification.error({
                message: "请输入正确的内容",
            })
            return
        }
        let parms = {}
        if (JSON.stringify(editItem) === '{}') {
            parms = {
                id: makeidNumber(8),
                title: inputValue
            }
            dispath(addData(parms))
        } else {
            parms = { ...editItem, title: inputValue }
            dispath(editData(parms))
        }
        setModleType(false)
        setInputValue('')
        setEditItem({})
    }
    const handleCancel = () => {
        setModleType(false)
        setInputValue('')
        setEditItem({})
    }
    const onSearch = (value: string) => {
        dispath(searchData(value))
    };
    return (
        <div className="updataContent">
            <Button type="primary" onClick={() => { setModleType(true); setModalTitle('新增信息') }}>新增</Button>
            <Search placeholder="请输入搜索词" onSearch={onSearch} enterButton style={{ width: '260px', marginLeft: "30px" }} />
            <br />
            <div>
                {ListData && ListData.length ? ListData.map((item: any) => {
                    return (
                        <Card
                            cover={
                                <img
                                    alt="example"
                                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                                />
                            }
                            key={item.id}
                            style={{ width: '362px', margin: '20px', display: 'inline-block' }}
                            actions={[
                                <Button type="link" style={{ width: '100%' }} onClick={() => { deleteList(item.id) }}>删除</Button>,
                                <Button type="link" style={{ width: '100%' }} onClick={() => { setModleType(true); setModalTitle('修改信息'); setEditItem(item) }}>修改</Button>
                            ]}
                        >
                            <Meta
                                avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                                title="今日特讯"
                                description={<Paragraph ellipsis={true}>{item.title}</Paragraph>}
                            />
                        </Card>
                    )
                }) : ''}
            </div>
            <Modal
                title={modalTitle}
                visible={modleType}
                onOk={handleOk}
                onCancel={handleCancel}
                destroyOnClose={true}
                maskClosable={false}
                okText="确认"
                cancelText="取消"
            >
                <Input placeholder={modalTitle === "修改信息" ? '请输入修改内容' : "请输入新增内容"} value={inputValue} onChange={(e) => {
                    setInputValue(e.target.value)
                }} />
            </Modal>
        </div>
    )
}
export default UpdataPage